<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
    <!-- bootstrap 3.0.2 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Morris chart -->
    <link href="css/morris/morris.css" rel="stylesheet" type="text/css"/>
    <!-- jvectormap -->
    <link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css"/>
    <!-- Date Picker -->
    <link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css"/>
    <!-- fullCalendar -->
    <!-- <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> -->
    <!-- Daterange picker -->
    <link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css"/>
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="css/iCheck/all.css" rel="stylesheet" type="text/css"/>
    <!-- bootstrap wysihtml5 - text editor -->
    <!-- <link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> -->
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <!-- Theme style -->
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-table.css" rel="stylesheet">

    <!--右侧二维码-->
    <link href="css/rightQRcode.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>

    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <style type="text/css">

    </style>
</head>
<body class="skin-black">
<!-- header logo: style can be found in header.less -->
<header class="header">
    <a href="#" class="logo">可视化界面</a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-user"></i>
                        <span>haocheng<i class="caret"></i></span>
                    </a>
                    <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
                        <li class="dropdown-header text-center">Account</li>
                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="fa fa-user fa-fw pull-right"></i>
                                Profile
                            </a>
                            <a data-toggle="modal" href="#modal-user-settings">
                                <i class="fa fa-cog fa-fw pull-right"></i>
                                设置
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="/logout"><i class="fa fa-ban fa-fw pull-right"></i> 安全退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side sidebar-offcanvas">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="img/avatar5.png" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>欢迎登录</p>

                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- search form -->
            <form action="/togetyhxx" method="post" class="sidebar-form" target="_blank">
                <div class="input-group">
                    <input type="text" name="tel" class="form-control" placeholder="Search..."/>
                    <span class="input-group-btn">
                                        <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i
                                                class="fa fa-search"></i></button>
                                    </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li class="active">
                    <a href="/toyhxx" target="_blank">
                        <i class="fa fa-dashboard"></i> <span>用户信息</span>
                    </a>
                </li>
                <li>
                    <a href="/toGetVip" target="_blank">
                        <i class="fa fa-gavel"></i> <span>会员等级</span>
                    </a>
                </li>

                <li>
                    <a href="/toxwfx">
                        <i class="fa fa-globe"></i> <span>行为分析</span>
                    </a>

                </li>

                <li class="parent">
                    <a href="">
                        <i class="fa fa-glass"></i> <span>账单信息</span>
                        <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em
                                class="glyphicon glyphicon-s glyphicon-plus"></em></span>
                    </a>
                    <ul class="children collapse" id="sub-item-1">
                        <li>
                            <a class="" href="/toGetPayWay" target="_blank">
                                <span class="glyphicon glyphicon-share-alt"></span> 支付方式
                            </a>
                        </li>
                        <li>
                            <a class="" href="/toGetScatterData" target="_blank">
                                <span class="glyphicon glyphicon-share-alt"></span> 聚类分析
                            </a>
                        </li>
                        <li>
                            <a class="" href="/tocxcp" target="_blank">
                                <span class="glyphicon glyphicon-share-alt"></span> 畅销套餐
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <aside class="right-side">

        <!-- Main content -->
        <section class="content">
            <div class="row" style="margin-bottom:5px;">
                <div class="col-md-4">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-red"><i class="fa fa-check-square-o"></i></span>
                        <div class="sm-st-info">
                            <span style="font-size: large">在网用户总量/人</span>
                            <span id="usernum" style="padding-top: 10px"></span>
                        </div>
                        <!--定时器-->
                        <script>
                            /*时间是毫秒*/
                            setInterval('refreshUser()', 10000);

                            /*刷新用户个数*/
                            function refreshUser() {
                                var usernum = document.getElementById('usernum');
                                $.ajax({
                                    url: "/getUserNum",
                                    dataType: "json",
                                    type: "post",
//                                  async : "true",
                                    success: function (data) {
                                        $("#usernum").html(data)
                                    }
                                })
                            }
                        </script>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-blue"><i class="fa fa-dollar"></i></span>
                        <div class="sm-st-info">
                            <span style="font-size: large">成交金额总量/元</span>
                            <span id="moneysum" style="padding-top: 10px"></span>
                        </div>
                        <!--定时器-->
                        <script>
                            /*时间是毫秒*/
                            setInterval('refreshMoney()', 10000);

                            /*刷新总金额*/
                            function refreshMoney() {
                                $.ajax({
                                    url: "/getMoneySum",
                                    dataType: "json",
                                    type: "post",
//                                  async : "true",
                                    success: function (data) {
                                        $("#moneysum").html(data)
                                    }
                                })
                            }
                        </script>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-green"><i class="fa fa-paperclip"></i></span>
                        <div class="sm-st-info">
                            <div class="sm-st-info">
                                <span style="font-size: large">当前在线客服人数</span>
                                <span id="servicernum" style="padding-top: 10px"></span>
                            </div>
                            <!--定时器-->
                            <script>
                                /*时间是毫秒*/
                                setInterval('refreshServicer()', 10000);
                                function refreshServicer() {
                                    /*刷新总金额*/
                                    $.ajax({
                                        url: "/getServicerNum",
                                        dataType: "json",
                                        type: "post",
                                        //                                  async : "true",
                                        success: function (data) {
                                            $("#servicernum").html(data)
                                        }
                                    })
                                }
                            </script>

                            <!--弹出模态框插件-->
                            <!--<span id="sendHttp" style="padding-top: 5px"></span>
                            <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                                发送历史数据
                            </a>-->
                            <!-- 模态框（Modal） -->
                            <!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">数据上传至Nginx服务器</h4>
                                        </div>
                                        <script>
                                            function getFilePath() {
                                                alert($("#file").attr("value"));
                                            }
                                            
                                            function upload() {
                                                var msg = "您确定要上传么？\n\n请确认！";
                                                if (confirm(msg)==true){
                                                    return true;
                                                }else{
                                                    return false;
                                                }
                                                alert("上传成功!")
                                            }

                                        </script>

                                        <form action="/sendFile" method="post">
                                            <div class="modal-body">
                                                &lt;!&ndash; 给这个input 设置样式隐藏，切忌不可用display控制隐藏,可能不能跨浏览器 &ndash;&gt;
                                                &lt;!&ndash;<input type="file" id="file" onchange="getFilePath()"
                                                       style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>&ndash;&gt;
                                                <h4>请输入：</h4>
                                                <input id="file" type="text" name="srcpath" placeholder="文件全路径" style="width: 400px"/>
                                                &lt;!&ndash;<button onclick="getFilePath()">get FilePath</button>&ndash;&gt;
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <input type="submit" class="btn btn-primary" onclick="upload()"></input>
                                            </div>
                                        </form>

                                    </div>&lt;!&ndash; /.modal-content &ndash;&gt;
                                </div>&lt;!&ndash; /.modal &ndash;&gt;
                            </div>-->

                        </div>
                    </div>
                </div>
            </div>

            <!-- Main row -->
            <div class="row">
                <div class="col-md-8">
                    <!--earning graph start-->
                    <section class="panel">
                        <header class="panel-heading">
                            用户行为分析
                        </header>
                        <div class="panel-body">
                            <div id="linechart" style="width: 1100px; height: 450px"></div>
                        </div>
                    </section>
                    <!--earning graph end-->

                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <section class="panel">
                        <header class="panel-heading">
                            充值排行
                        </header>
                        <div class="panel-body table-responsive">
                            <table data-toggle="table" id="table-style3" data-url="/getRechargeProvTop"
                                   data-row-style="rowStyle">
                                <thead>
                                <tr>
                                    <th data-field="province">省份</th>
                                    <th data-field="total">充值总金额（单位：元）</th>
                                </tr>
                                </thead>
                            </table>
                            <script>
                                $(function () {
                                    $('#hover, #striped, #condensed').click(function () {
                                        var classes = 'table';

                                        if ($('#hover').prop('checked')) {
                                            classes += ' table-hover';
                                        }
                                        if ($('#condensed').prop('checked')) {
                                            classes += ' table-condensed';
                                        }
                                        $('#table-style3').bootstrapTable('destroy')
                                            .bootstrapTable({
                                                classes: classes,
                                                striped: $('#striped').prop('checked')
                                            });
                                    });
                                });

                                function rowStyle(row, index) {
                                    var classes = ['active', 'success', 'info', 'warning', 'danger'];

                                    if (index % 2 === 0 && index / 2 < classes.length) {
                                        return {
                                            classes: classes[index / 2]
                                        };
                                    }
                                    return {};
                                }
                            </script>
                        </div>
                    </section>


                </div><!--end col-6 -->
                <div class="col-md-6" style="width: 845px;">
                    <section class="panel">
                        <header class="panel-heading">
                            kmeans结果统计
                        </header>
                        <div class="panel-body">
                            <div id="kmeans_res" style="width: 800px; height: 385px"></div>
                            <script type="text/javascript">
                                var myChart2 = echarts.init(document.getElementById('kmeans_res'));
                                myChart2.setOption({
                                    title : {
                                        text: '聚类结果展示',
                                        subtext: 'kmeans',
                                        x:'center'
                                    },
                                    tooltip : {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient : 'horizontal',
                                        x : 'center',
                                        y : 'bottom',
                                        data: ['类别一', '类别二', '类别三']
                                    },
                                    toolbox: {
                                        show : true,
                                        feature : {
                                            mark : {show: true},
                                            dataView : {show: true, readOnly: false},
                                            magicType : {
                                                show: true,
                                                type: ['pie', 'funnel']
                                            },
                                            restore : {show: true},
                                            saveAsImage : {show: true}
                                        }
                                    },
                                    calculable : true,
                                    series : [
                                        {
                                            name:'用户群体',
                                            type:'pie',
                                            radius : [50, 110],
                                            center : ['50%', '50%'],
                                            roseType : 'area',
                                            data:[]
                                        }
                                    ]
                                });

                                var datares = [];
                                var info = {"opt": "pie"};
                                $.post('./getKmeansRes', info, function (data) {
                                    console.log(data)
                                    datares.length = 0;
                                    for (var i = 0; i < data.length; i++) {
                                        datares.push({"name": data[i].type, "value": data[i].count})
                                    }
                                    console.log(datares)
                                    // 填入数据
                                    myChart2.setOption({
                                        /*legend: {
                                            //类别
                                            data: mapOnlyKey
                                        },*/
                                        series: [{
                                            // 根据名字对应到相应的系列
                                            type:'pie',
                                            data: datares
                                        }]
                                    });

                                }, 'json');

                            </script>
                        </div>
                    </section>
                </div>

            </div>
            <!--右侧客服浮动-->
            <div id="leftsead">
                <ul>
                    <li>
                        <a id="top_btn">
                            <img src="img/foot03/ll06.png" width="47" height="49" class="hides"/>
                            <img src="img/foot03/l06.png" width="47" height="49" class="shows"/>
                        </a>
                    </li>

                    <li>
                        <a>
                            <img src="img/foot03/ll03.png" width="47" height="49" class="hides"/>
                            <img src="img/foot03/l03.png" width="47" height="49" class="shows"/>
                        </a>
                    </li>

                    <li>
                        <a href="">
                            <img src="img/foot03/ll02.png" width="200" height="49" class="hides"/>
                            <img src="img/foot03/l04.png" width="47" height="49" class="shows"/>
                        </a>
                    </li>

                    <li>
                        <a class="youhui">
                            <img src="img/foot03/l02.png" width="47" height="49" class="shows"/>
                            <img src="img/foot03/zfew.jpg" width="200" height="160" class="hides" usemap="#taklhtml"/>
                        </a>
                    </li>


                </ul>
            </div><!--leftsead end-->

            <!-- row end -->
        </section><!-- /.content -->
    </aside><!-- /.right-side -->

</div><!-- ./wrapper -->


<!-- jQuery 2.0.2 -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>-->
<script src="js/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI 1.10.3 -->
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>

<script src="js/plugins/chart.js" type="text/javascript"></script>

<!-- datepicker
<script src="js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>-->
<!-- Bootstrap WYSIHTML5
<script src="js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>-->
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- calendar -->
<script src="js/plugins/fullcalendar/fullcalendar.js" type="text/javascript"></script>

<!-- Director App -->
<script src="js/Director/app.js" type="text/javascript"></script>

<!-- Director dashboard demo (This is only for demo purposes) -->
<script src="js/Director/dashboard.js" type="text/javascript"></script>

<!-- Director for demo purposes -->
<script type="text/javascript">
    $('input').on('ifChecked', function (event) {
        // var element = $(this).parent().find('input:checkbox:first');
        // element.parent().parent().parent().addClass('highlight');
        $(this).parents('li').addClass("task-done");
        console.log('ok');
    });
    $('input').on('ifUnchecked', function (event) {
        // var element = $(this).parent().find('input:checkbox:first');
        // element.parent().parent().parent().removeClass('highlight');
        $(this).parents('li').removeClass("task-done");
        console.log('not');
    });

</script>
<script>
    $('#noti-box').slimScroll({
        height: '400px',
        size: '5px',
        BorderRadius: '5px'
    });

    $('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
        checkboxClass: 'icheckbox_flat-grey',
        radioClass: 'iradio_flat-grey'
    });
</script>
<!--+号下拉展示-->
<script>
    !function ($) {
        $(document).on("click", "ul.sidebar-menu li.parent > a > span.icon", function () {
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar-menu span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    })
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })
</script>

<!--右侧二维码展示-->
<script type="text/javascript">
    $(document).ready(function () {

        $("#leftsead a").hover(function () {
            if ($(this).prop("className") == "youhui") {
                $(this).children("img.hides").show();
            } else {
                $(this).children("img.hides").show();
                $(this).children("img.shows").hide();
                $(this).children("img.hides").animate({marginRight: '0px'}, 'slow');
            }
        }, function () {
            if ($(this).prop("className") == "youhui") {
                $(this).children("img.hides").hide('slow');
            } else {
                $(this).children("img.hides").animate({marginRight: '-143px'}, 'slow', function () {
                    $(this).hide();
                    $(this).next("img.shows").show();
                });
            }
        });

        $("#top_btn").click(function () {
            if (scroll == "off") return;
            $("html,body").animate({scrollTop: 0}, 600);
        });

    });
</script>

<!--折线图展示-->
<script type="text/javascript">
    var data = [];
    var markLineData = [];
    for (var i = 1; i < data.length; i++) {
        markLineData.push([{
            xAxis: i - 1,
            yAxis: data[i - 1],
            value: (data[i] + data[i - 1]).toFixed(2)
        }, {
            xAxis: i,
            yAxis: data[i]
        }]);
    }
    // 定义图表option
    option = {
        //图表标题
        title: {
            //正标题
            text: '充值时间分布',
            //副标题
            subtext: '单位：小时'
        },
        //数据提示框配置
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}"
        },
        legend:{
            data: ['三月份','四月份','五月份']
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        grid: {
            left: 100
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series: [
            {
                name: '三月份',
                type: 'line',
                stack: '总量',
                data: []
            },
            {
                name:'四月份',
                type:'line',
                stack: '总量',
                data: []
            },
            {
                name:'五月份',
                type:'line',
                stack: '总量',
                data: []
            }

        ],
        markPoint: {
            data: [{
                type: 'max',
                name: '最大值'
            }, {
                type: 'min',
                name: '最小值'
            }]
        },
        //效果样式
        markLine: {
            smooth: true,
            effect: {
                show: true
            },
            distance: 10,
            label: {
                normal: {
                    position: 'middle'
                }
            },
            symbol: ['none', 'none'],
            data: [
                {type: 'average', name: '平均值'}
            ]
        }

    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('linechart'));
    // 为echarts对象加载数据
    myChart.setOption(option);
    // 异步加载数据
    var info = {
        "opt": "line"
    };
    $.post("./GetLineData", info, function (obj) {
        var data1 = []
        var data2 = []
        var data3 = []
        for (var i = 0; i < obj.length; i++) {
            data1.push(obj[i]["march"])
            data2.push(obj[i]["april"])
            data3.push(obj[i]["may"])
        }
        console.log(data1)
        console.log(data2)
        console.log(data3)
        myChart.setOption({
            series:[
                {
                    data:data1
                },
                {
                    data:data2
                },
                {
                    data:data3
                }
            ]
        })
    },'json');
</script>

</body>
</html>